<template>
    <div class="emp-container">
        <!-- 查询表单 -->
        <el-form :inline="true">
            <el-form-item>
                <el-autocomplete
                  v-model="searchObj.feid"
                  :fetch-suggestions="querySearch"
                  :trigger-on-focus="false"
                  class="inline-input"
                  placeholder="工号"
                  value-key="feid" />
              </el-form-item>
            <el-form-item>
              <el-autocomplete
                v-model="searchObj.fename"
                :fetch-suggestions="querySearch"
                :trigger-on-focus="false"
                class="inline-input"
                placeholder="员工姓名"
                value-key="fename" />
            </el-form-item>
            <el-form-item>
                <el-select v-model="searchObj.fdid" clearable placeholder="部门">
                    <el-option
                    v-for="item in deptList"
                    :key="item.fdid"
                    :label="item.fdname"
                    :value="item.fdid">
                  </el-option>
                </el-select>
              </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="fetchData()">查询</el-button>
              <el-button type="default" @click="resetData()">清空</el-button>
            </el-form-item>
          </el-form>
        
        <el-button type="primary" @click.native="vueCreate">创建员工</el-button>
        <el-button type="primary" @click.native="vueCreate">导入Excel</el-button>
        <el-button type="primary" @click.native="vueCreate">导出Excel</el-button>
        <empinfo :dialogFormVisible="dialogFormVisible" :editEmpInfo="editEmpInfo" :updateOrCreate="updateOrCreate" />
        <el-table
            :data="empList"
            style="width: 100%"
        >
            <el-table-column
                prop="feid"
                label="工号"
                width="80"
                sortable
                />
            <el-table-column
                prop="fename"
                label="姓名"
                width="100"
                sortable
                />
            <el-table-column label="性别" width="80" prop="fegender" sortable>
                <template slot-scope="scope">
                    <el-tag type="warning" effect="dark" v-if="scope.row.fegender==false">女</el-tag>
                    <el-tag type="danger" effect="dark" v-else-if="scope.row.fegender==true">男</el-tag>
                    <el-tag type="danger" effect="dark" v-else>未知</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="fdname"
                label="部门"
                width="80"
                sortable
                />
            <el-table-column
                prop="fetitle"
                label="职位"
                width="80"
                sortable
                />
            <el-table-column
                prop="fetel"
                label="电话号"
                width="150"
                sortable
                />
            <el-table-column
                prop="feemail"
                label="邮箱"
                width="200"
                sortable
                />
            <el-table-column
                prop="febirthday"
                label="生日"
                width="100"
                :formatter="dateFormat"
                sortable
                />
            <el-table-column
                prop="feofferstartdate"
                label="入职日期"
                width="130"
                :formatter="dateFormat"
                sortable
                />
            <el-table-column
                prop="feofferenddate"
                label="合同到期日期"
                width="130"
                :formatter="dateFormat"
                sortable
                />
            <el-table-column
                prop="fememo"
                label="备注"
                width="100"
                sortable
                />
            <el-table-column width="150" label="操作" sortable>
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="vueDelete(scope.row.feid)">删除</el-button>
                    <el-button type="primary" size="small"  @click="vueEdit(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 50, 100, 200]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="200">
      </el-pagination>
    </div>
</template>
<script>
import { getEmpList , deleteEmp, getListBySearch } from '@/api/emp'
import { getDeptList } from '@/api/dept'
import empinfo from '@/views/system/emp/components/EmpInfo'
import moment from 'moment'

export default {
    components: {
        empinfo
    },
    data () {
        return {
            empList: {},
            dialogFormVisible: false,
            /*true 代表更新，false代表创建*/
            updateOrCreate: false,
            editEmpInfo: {},
            searchObj: {},
            deptList: {}
        }
    },
    created() {
        this.initGetEmpList()
        this.initGetDeptList()
    },
    methods: {
        initGetEmpList() {
            getEmpList().then(response => {
              this.empList = response.data.empList
          })
        },
        initGetDeptList() {
            getDeptList().then(response => {
                this.deptList = response.data.deptList
            })
        },
        // 事件格式化 利用momeent 模块 npm install moment
        dateFormat: function(row,column) {
            var date = row[column.property]
            if (date == undefined) {
                return ""
            }
            return moment(date).format("YYYY-MM-DD")
        },
        vueCreate() {
            this.dialogFormVisible=true
            this.updateOrCreate=false
        },
        vueEdit(row) {
            this.dialogFormVisible=true
            this.updateOrCreate=true
            this.editEmpInfo=row
            console.log(row.fegender==true)
        },
        vueReset() {
            this.dialogFormVisible=false
            this.updateOrCreate=false
            this.editEmpInfo={}
        },
        vueDelete(id) {
            this.$confirm('此操作将永久删除，受否继续？','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteEmp(id).then(response => {
                    this.initGetEmpList()
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        fetchData() {
            getListBySearch(this.searchObj).then(response => {
                this.empList = response.data.empList
            })
        },
        resetData() {
            this.searchObj = {}
        }
    }

}

</script>
<style lang="scss" scoped>
    .emp-container {
      margin: 10px 50px 0;
      overflow: hidden;
    }
</style>